{% extends "base.html" %}
{% load static %}

{% block css_head %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/home.css' %}">
{% endblock %}
{% block body %}
    {% block title_body %}
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header"> 
            <a class="navbar-brand" href="/"></span>首页</a>
        </div>
        
        <form class="navbar-form navbar-right">
        {% csrf_token %}
            <div class="form-group">
                <div class="input-group ">
                    <span class="input-group-addon" id="sizing-addon1"><span class="glyphicon glyphicon-envelope glyphicon-lg"></span></span>
                    <input type="email" name="email" class="form-control" placeholder="Email" aria-describedby="sizing-addon1">
                </div>
                <div class="input-group ">
                    <span class="input-group-addon" id="sizing-addon1"></span>
                    <input type="password" name="password" class="form-control" placeholder="Password" aria-describedby="sizing-addon1">

                </div>
                <button class="btn btn-default" value="commit" name="commit">Login in</button>
            </div>
        </form>
    </nav>
    {% endblock %}

    {% block middle_body %}
    <div class="middle_body">
        <div class="col-md-4 ">
            <a href="#">
                <div class="thumbnail category">
                    <h1 class="font-slim" >Decode </h1>
                    <p class="font-big font-slim">some explainations...</p>
                </div>
            </a>
        </div>
        <div class="col-md-4 ">
            <a href="#">
                <div class="thumbnail category">
                    <h1 class="font-slim" >Network</h1>
                    <p class="font-big font-slim">some explainations...</p>
                </div>
            </a>
        </div>
        <div class="col-md-4 ">
            <a href="#">
                <div class="thumbnail category">
                    <h1 class="font-slim" >Reverse </h1>
                    <p class="font-big font-slim">some explainations...</p>
                </div>
            </a>
        </div>    
    </div>

    
    {% endblock %}
{% endblock %}
